/*

Darko Bunic
http://www.redips.net/
Jan, 2010.

*/

  body {
	padding-left: 1em;
	font-family: Arial;
    color:white;
    background-color: black;
font-size:20px;
}


#main_container 
{

width: 1000px;
display: table;		   
 table-layout: auto;			
padding-left: 0px;
padding-right: 0px;		
margin-left: 10px;
margin-top:0px;
margin-bottom:0px;
}
		
#CLOCK
{	
margin-left: 200px;
margin-BOTTOM: -100px;
}	


      .dot {
  height: 50px;
  width: 50px;
display: inline-block;
  clear: both;
text-align: center;
	font-size:35px;
color:RED;
}

/* message line */
#message {
	
width: 600px;		
height: 20px;	
text-align: center;	
font-size:20px;
font-weight: bold;
border: 5px solid blue;
padding-left: 0px;
padding-bottom: 3px;
}

div.scrollmenu5 {
	position:absolute; 
	display: BLOCK;
MARGIN-LEFT:800px;
    background-color: black;
    overflow: auto;
    white-space: nowrap;
	margin-top: -380px;
	width:120px;
	height: 380px;
}


div.scrollmenu5CL {
	position:absolute; 
	display: BLOCK;
MARGIN-LEFT:700px;
    background-color: black;
    overflow: auto;
    white-space: nowrap;
	margin-top: -360px;
	width:360px;
	height: 350px;
}






a:link { 
color: yellow; 
font-size:90%;
background-color:black ;
text-decoration: none;
}

a:visited { 
color: #33FFFF; 
font-size:120%;
background-color: black;
text-decoration: none;
}

a:hover {
color: grey; 
background-color: dark grey;
text-decoration: none;
} 













/*following refers to INPUT NUMBER under COUNTDOWN but dissactivated as not required.*/
input { 
 background-color: #666699; font-size:20px;
}


#dragn{			
width: 200px;		
height: 30px;					
margin-left: 210px;
margin-top:20px;
}	






/* the following code(for centering fons in left table) not placed in "black" but in "redips-drag" */
#{	
    display: grid;
      place-items: center;
 }
#black{			
background: rgba(0, 0, 0, 0);
width: 15px;		
height: 34px;
}

#help{
position:absolute;
right:120px;
top:100px;		
width: 20px;	
height: 20px;				
}

#next{
position:absolute;
right:190px;
top:100px;		
width: 20px;		
height: 20px;
}

#home{
position:absolute;
right:240px;
top:200px;		
width: 20px;
height: 40px;
}


/* FON TABLE*/
#left{
height: 210px;
float: center;
margin-left:90px;
margin-top:355px;
}

/* CENTRE MAIN TABLE*/

#center
{
position:absolute;	
margin-left: 300px;
width: 200px;
margin-top: -100px;
}


				/* the following is ONLY NEEDED for page where THE CODE FOR RIGHT CON TABLE is sperated from MAIN CONTAINER in EDITOR. 
				see the example page in ALWAYS AWAKE PLUS.
				
#rightcol	
{
display: table;		   
 table-layout: auto;			
margin-left: 500px;
margin-top: 950px;
}	


/* SPACE between table cells + font size JH */

div#redips-drag td {
height: 34px;
width: 10px;
border: px solid white;
line-height: 35px;
font-size: 20px;
padding: 0px;
}


		
/* trash cell */

.redips-trash {
    color: SteelBlue;
    background-color: lightblue ;
}

/* trash cell behind FON7CON cells- black */
.FONCON-trash {
    color: RED;
    background-color: lightblue ;
	height: 33px;
}


/* CONTROLS color of CON grey cells in center table */
.grey {
	background-color: grey;
}

p.smallspace {
  line-height: 0.2;
}

/* drag objects (DIV inside table cells - ONLY table FONS and table CONS) */
.redips-drag{
	cursor: move;
	margin: auto;	
z-index: -1;
background-color: black;
text-align: center;	
font-size:22pt; /* adjusts CON Rtable size */
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
opacity: 0.9;	
border: 2px solid GREY;
filter: alpha(opacity=70);
width: 34px;	
height: 34px;
display: grid;
      place-items: center;
}

		/* left table - td */
	div#redips-drag #table1 td{		
border-width: 0px 0px 0px 0px;		
border-color: blue;
margin-left: 40px;
	}
				/* center table - td */
	div#redips-drag #table2 td{		
border-width: 0px 0px 0px 0px;		
border-color: blue;
margin-left: 100px;
	}
				/* right table - td */
	div#redips-drag #table3 td{		
border-width: 0px 0px 0px 0px;		
border-color: blue;
margin-left: 400px;
	}	
	
	
	
	
	
.dark1 {
	background-color: black;
padding-bottom: 0px;	
text-align: center;	
font-size:35pt;
}

#number{
position:absolute;	
text-align: left;	
 margin-top:10px;

}


#bottom1{
position:absolute;	  
 margin-top:400px;
 margin-left: 10px;
table-layout: auto;			
padding-left: 0px;
padding-right: 0px;

}




#list_1
{		
width:220px;			
height: 100px;			
 position:absolute;
margin-top:0px;
margin-left: 10px;
font-size:10pt; 
color:yellow;
text-align: left;
z-index:1;
}

#list_2
{			
width:220px;		
height: 100px;			
position:absolute;
margin-top:420px;
margin-left: 10px;	
text-align: left;
font-size:10pt; 
color:yellow;
}

#list_3{			
width:200px;			
height: 700px;			
 position:absolute;
margin-top:-550px;
margin-left: 980px;	
color: pink;	
font-size:15pt; 	
}

#list_4{			
width:60px;			
height: 700px;			
 position:absolute;
margin-top:-400px;
margin-left: 1180px;
color: white;		
}




#th5{
background-color:  black;
text-decoration: none;

} 
#th5:hover {

background-color:  #2d2d2d;
text-decoration: none;

} 
#list_left
{			
	text-align: center;
}


/* blank cells (to create gap between left column and message row) */
.blank {
	background-color: GREY;
}